<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link rel="bookmark" th:href="@{/favicon.ico}"/>
    <title>LangV</title>

    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/css/style-responsive.css}" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script th:src="@{/js/html5shiv.js}"></script>
    <script th:src="@{/js/respond.min.js}"></script>
    <![endif]-->
    <style> /*v-clock 解决闪烁{{后端参数}}的问题，在id=app的div内声明v-clock即可*/
    [v-clock]{
        display: none;
    }
    </style>
</head>

<body class="mybody">

        <div th:replace="common/header::top"></div>
        <div class="left-side sticky-left-side" tabindex="5000" style="overflow: hidden;">

            <div class="left-side-inner">
                <ul class="nav  custom-nav">
                    <li ><a href=""><i class="fa fa-home"></i> <span>主页</span></a>
                    </li>
                    <li ><a href=""><i class="fa fa-fire"></i> <span>热门播放</span></a>
                    </li>
                    <li ><a href=""><i class="fa fa-eye"></i> <span>历史记录</span></a>
                    </li>
                </ul>
                <hr style="margin-top: 1px"/>
                <div class="mysort"> 分类 </div>
                <div  style="margin-top: -30px;">
                <ul class="nav fa2 custom-nav ">
                    <li ><a href=""><i class="fa fa-music"></i> <span>音乐</span></a>
                    </li>
                    <li ><a href=""><i class="fa fa-dribbble"></i> <span>运动</span></a>
                    </li>
                    <li ><a href=""><i class="fa fa-gamepad"></i> <span>游戏</span></a>
                    </li>
                    <li ><a href=""><i class="fa fa-github-alt"></i> <span>动漫</span></a>
                    </li>
                    <li ><a href=""><i class="fa fa-film"></i> <span>电影</span></a>
                    </li>
                    <li ><a href=""><i class="fa fa-youtube"></i> <span>新闻</span></a>
                    </li>
                    <li ><a href=""><i class="fa fa-video-camera"></i> <span>直播</span></a>
                    </li>
                </ul>
                </div>

            </div>
        </div>
        <div class="wrapper" id="app" v-clock>
            <div class="row">
                <div class="col-sm-12">
                    <section class="index_panel">
                        <div class="panel-body">
                            <div  class="media-gal">
                                <div v-for="(video,index) in videos" class="images item " >
                                    <!--注意此处Vue传入参数的方式-->
                                    <a :href="'video/toVideo/'+(video.id)" data-toggle="modal" >
                                        <span class="spanImg">
                                        <img class="vimg" :src="'video/getImg/'+(video.id)" alt="" />
                                        <p> &nbsp;{{video.time}}</p>
                                        <div class="myplayicon" ></div>
                                        </span>

                                    </a>
                                    <div>
                                      <p1><a :href="'video/toVideo/'+(video.id)" v-bind:title="video.title" class="aitem">{{video.title}}</a></p1>
                                    </div>
                                    <div>
                                      <p3>
                                        <img  height="17px" width="17px" th:src="@{/images/icon_up.png}" alt="" />
                                        <a  :href="'/user/toHome/'+(video.username)"> &nbsp{{video.username}}&nbsp </a>
                                        <i style="font-size: 15px;color: #86b828" class="fa fa-check-circle-o"></i>
                                      </p3>
                                    </div>
                                    <div>
                                       <p2>
                                          <i style="font-size: 16px" class="fa fa-youtube-play"></i>&nbsp&nbsp12万次 &nbsp&nbsp&nbsp&nbsp
                                          <i style="font-size: 15px" class="fa fa-clock-o"></i>&nbsp {{video.postTime}}
                                      </p2>
                                    </div>
                                </div>

                                <div class="col-md-12 text-center clearfix">
                                    <ul class="pagination">
                                        <li><a href="javascript:void(0)" @click="lastPage">«</a></li>
                                        <li><a href="javascript:void(0)" @click="nextPage" >»</a></li>
                                    </ul>
                                </div>
                            </div>


                            <!-- Modal -->
                            <!-- modal -->

                        </div>
                    </section>
                </div>
            </div>
        </div>
        <div th:replace="common/header::footer"></div>


    <!-- m  ain content end-->

<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<!--右边滑条样式-->
<!--<script src="js/jquery.nicescroll.js"></script>-->

<script src="js/jquery.isotope.js"></script>

<!--common scripts for all pages-->
<script src="js/scripts.js"></script>
<script th:src="@{/js/vue.min.js}"></script>
<script th:src="@{/js/axios.min.js}"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            videos: [],
            currentPage: 1,
            totalPages: '',

        },
        created(){
            //设置时间工具moment.js的语言为中文
            moment.locale('zh-cn')
            this.getVideo(1)
        },
        methods:{
            getVideo(pageNum){
                moment.locale('zh-cn')
                axios.get('/video/getAllVideos/'+pageNum).then(res=>{
                    this.totalPages=res.data.pages;
                    for (let i = 0; i <res.data.records.length ; i++) {
                        let post_time = res.data.records[i].postTime
                        let timeDif = moment(post_time).startOf('minute').fromNow()
                        if (timeDif.indexOf("天") !== -1 || timeDif.indexOf("月") !== -1 || timeDif.indexOf("年") !== -1) {
                            res.data.records[i].postTime=(moment(post_time).format("YYYY-MM-DD"))
                        } else {
                            res.data.records[i].postTime=(moment(post_time).startOf('minute').fromNow())
                        }
                    }
                    this.videos=res.data.records;
                })
            },
            nextPage(){
                if (this.currentPage<this.totalPages) {
                    this.currentPage = this.currentPage + 1
                    this.getVideo(this.currentPage)
                }
            },
            lastPage() {
                if (this.currentPage > 1) {
                    this.currentPage = this.currentPage - 1
                    this.getVideo(this.currentPage)
                }
            }

            }
    })
</script>

</body>
</html>
